<template>
  <div class="app-container">
    <el-form
      ref="listFilterRef"
      :model="list.filter"
      inline
      class="list-filter"
    >
      <el-form-item prop="keyword">
        <el-input v-model="list.filter.keyword" placeholder="名称" clearable />
      </el-form-item>
      <el-form-item prop="contactName">
        <el-input
          v-model="list.filter.contactName"
          placeholder="联系人姓名"
          clearable
        />
      </el-form-item>
      <el-form-item prop="contactPhone">
        <el-input
          v-model="list.filter.contactPhone"
          placeholder="联系人电话"
          clearable
        />
      </el-form-item>
      <el-form-item prop="areaCode">
        <AllRegionSelect
          v-model="list.filter.areaCode"
          :props="{
            checkStrictly: true
          }"
        />
      </el-form-item>
      <!-- <el-form-item prop="contactName">
        <el-input
          v-model="list.filter.agencyName"
          placeholder="所属引入方名称"
          clearable
        >
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </el-input>
      </el-form-item>
      <el-form-item prop="status">
        <KiSelect
          v-model="list.filter.isAgency"
          :options="['否', '是']"
          placeholder="是否是引入方"
        />
      </el-form-item> -->
      <el-form-item prop="status">
        <KiSelect
          :index.sync="list.filter.status"
          :options="['停用', '启用']"
          placeholder="状态"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="table-operation">
      <div>
        <AuthButton @click="c" name="新增" />
        <!-- 导出 -->
        <ExportExcel
          url="/sot-admin-api/sys/company/export"
          :param="list.filter"
        />
      </div>
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <!-- <el-tabs
      v-model="list.filter.auditStatusTransfer"
      class="trial-state"
      type="border-card"
    >
      <el-tab-pane label="全部" name="999"></el-tab-pane>
      <el-tab-pane
        :label="'待审核' + (audit > 0 ? '(' + audit + ')' : '')"
        name="0"
      ></el-tab-pane>
      <el-tab-pane
        :label="'未通过审核' + (failed > 0 ? '(' + failed + ')' : '')"
        name="2"
      ></el-tab-pane>
    </el-tabs> -->

    <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
      <el-table-column align="center" type="index" />
      <el-table-column label="类型" prop="companyTypeName" />
      <el-table-column label="名称" prop="companyName" />
      <el-table-column label="所属地区" prop="areaName" />
      <el-table-column label="联系人" prop="contactName" />
      <el-table-column label="联系电话" prop="contactPhone" />
      <!-- <el-table-column label="是否是引入方" prop="isAgency">
        <template slot-scope="{ row }">
          {{ row.isAgency == '0' ? '否' : '是' }}
        </template>
      </el-table-column>
      <el-table-column label="所属引入方" prop="belongAgencyName" /> -->
      <!-- <el-table-column label="审核状态" align="center">
        <template slot-scope="{ row }">
          {{ row.auditStatus | auditStatus }}
        </template>
      </el-table-column> -->
      <el-table-column label="状态" width="80" align="center">
        <template slot-scope="{ row: { companyId, status, auditStatus } }">
          <KiPopSwitch
            v-if="companyId !== -1 && auditStatus == '1'"
            v-bind="popSwitchProps(status)"
            @change="updateStatus({ id: companyId, status: status ^ 1 })"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <!--  5) 待审核状态的企业有按钮：查看、审核、删除。
      6) 已审核状态的企业有按钮：查看、编辑、更换引入方、启用/停用、删除。
      7) 未通过状态的企业有按钮：查看、编辑、删除。
-->
          <AuthButton @click="r(row, 'config')" name="查看" />
          <AuthButton @click="u(row, 'config')" name="编辑" />
          <!--
            1、待审核 & 不是引入方
          -->
          <!-- <auth-button
            v-if="row.auditStatus == '0'"
            @click="$refs.trial.show(row)"
            name="审核"
            circle
          >
            <i class="el-icon-yjwl-shenhe"></i>
          </auth-button> -->
          <!-- 渠道授权管理 -->
          <!-- <AuthButton
            v-if="userInfo.userType == 0"
            circle
            @click="goAuth(row)"
            name="授权渠道"
          >
            <i class="el-icon-thumb"></i>
          </AuthButton>
          <AuthButton circle @click="goAuth_ck(row)" name="查看渠道">
            <i class="el-icon-view"></i>
          </AuthButton> -->
          <!--
            1、审核通过 & 引入方为空
            2、已经是引入方的企业不可为它绑定其他引入方
          -->
          <!-- <auth-button
            v-if="
              row.auditStatus == '1' &&
                row.isAgency == '0' &&
                row.belongAgencyId == null
            "
            @click="$refs.agentSetting.show(row)"
            name="引入方设置"
            circle
          >
            <i class="el-icon-s-cooperation"></i>
          </auth-button> -->
          <AuthButton @click="d({ id: row.companyId })" name="删除" />
        </template>
      </el-table-column>
    </el-table>

    <KiFormDialog
      :show.sync="form.show"
      :title="formTitle"
      v-model="form.data"
      :submit="submitX"
      :readonly="form.status === 'r'"
      ref="formRef"
      :loading="form.loading"
    >
      <template #el-form>
        <el-form-item label="名称" prop="companyName" :verify="{ maxLength: 200 }">
          <el-input
            v-model="form.data.companyName"
            placeholder="请输入名称"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="简介"
          prop="introduction"
          :verify="{ required: false, maxLength: 500 }"
        >
          <el-input
            v-model="form.data.introduction"
            placeholder="请输入简介"
            type="textarea"
            :autosize="{ minRows: 3 }"
            show-word-limit
            clearable
          />
        </el-form-item>
        <el-form-item
          label="联系人"
          prop="contactName"
          :verify="{ maxLength: 20 }"
        >
          <el-input
            v-model="form.data.contactName"
            placeholder="请输入联系人姓名"
            clearable
          />
        </el-form-item>
        <el-form-item label="联系人电话" prop="contactPhone" verify>
          <el-input
            v-model="form.data.contactPhone"
            placeholder="请输入联系人电话"
            clearable
          />
        </el-form-item>
        <el-form-item label="类型" prop="companyType" verify>
          <KiSelect
            v-model="form.data.companyType"
            :options="options.companyType"
            :disabled="form.status === 'r'"
          />
        </el-form-item>
        <el-form-item label="所属地区" prop="areaCode" verify>
          <AllRegionSelect
            v-model="form.data.areaCode"
            :disabled="form.status === 'r'"
          />
        </el-form-item>
        <el-form-item label="详细地址" prop="address" :verify="{ maxLength: 45 }">
          <el-input v-model="form.data.address" clearable>
            <el-button slot="prepend" @click="showCoordPicker = true">
              选择定位
            </el-button>
          </el-input>
          <CoordPicker
            :show.sync="showCoordPicker"
            :lng.sync="form.data.longitude"
            :lat.sync="form.data.latitude"
            :address.sync="form.data.address"
            :city="form.data.areaCode"
          />
        </el-form-item>
        <el-form-item label="经度" prop="longitude" verify>
          <el-input
            v-model="form.data.longitude"
            placeholder="请选择定位"
            clearable
          />
        </el-form-item>
        <el-form-item label="纬度" prop="latitude" verify>
          <el-input
            v-model="form.data.latitude"
            placeholder="请选择定位"
            clearable
          />
        </el-form-item>
        <el-form-item label="资质材料" prop="credentials" verify>
          <Imgpond v-model="form.data.credentials" :count="1" />
        </el-form-item>
        <el-form-item
          label="邮箱"
          prop="email"
          :verify="{ type: 'email', maxLength: 30 }"
        >
          <el-input
            v-model="form.data.email"
            placeholder="请输入邮箱地址"
            clearable
          />
        </el-form-item>
        <el-form-item label="商标/logo" prop="logo">
          <Imgpond
            :count="1"
            v-model="form.data.logo"
            :disabled="form.status === 'r'"
            :maxSize="20"
          />
        </el-form-item>
        <!-- <el-form-item
          v-if="form.status === 'r' && form.data.belongAgencyName"
          label="所属引入方"
        >
          {{ form.data.belongAgencyName }}
        </el-form-item>
        <el-form-item
          v-if="form.status === 'r' && form.data.auditInfoList"
          label="审核信息"
        >
          <el-table
            :data="form.data.auditInfoList"
            border
            fit
          >
            <el-table-column label="变更状态" prop="auditStatus">
              <template slot-scope="{ row }">
                {{ row.auditStatus | auditStatus }}
              </template>
            </el-table-column>
            <el-table-column label="变更时间" prop="createTime" />
            <el-table-column label="备注" prop="auditReason" />
            <el-table-column label="操作人" prop="createUserName" />
          </el-table>
        </el-form-item> -->
      </template>
    </KiFormDialog>

    <trial ref="trial" @trialSuccess="getList()" />
    <agent-setting ref="agentSetting" @serttingSuccess="getList()" />
    <!-- 授权渠道组件 -->
    <el-dialog
      :title="showType == 1 ? '授权渠道管理' : '查看授权渠道'"
      :visible.sync="showAtho"
      width="80%"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <!-- @refresh="() => this.getList()" -->
      <auth-manage
        @refresh="authRefresh()"
        ref="auth"
        :showType="showType"
      ></auth-manage>
    </el-dialog>
  </div>
</template>

<script>
// 标准一码游移除了渠道信息，暂时未删除所有代码，等后期确定之后再删除注释的代码
import { mapGetters } from 'vuex'
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
import trial from './components/trial.vue'
import agentSetting from './components/agent-setting.vue'
import authManage from './components/authorizer_manage.vue'
import { getUserInfo } from '@/utils/auth'

export default {
  mixins: [pageMixin],
  computed: {
    ...mapGetters(['areaTree'])
  },
  components: { trial, agentSetting, authManage },
  setup: () =>
    useAdmateAdapter({
      urlPrefix: 'sot-admin-api/sys/company',
      axiosConfig: {
        r: row => ({
          method: 'GET',
          url: row.companyId
        }),
        d: {
          method: 'POST'
        },
        getList: {
          url: 'list'
        }
      },
      list: {
        filter: {
          keyword: null,
          areaCode: null,
          contactName: '',
          contactPhone: ''
          // auditStatus: '',
          // auditStatusTransfer: ''
        }
      },
      form: {
        data: {
          __parentAreaCode: null,
          address: null,
          longitude: null,
          latitude: null
        }
      }
    }),
  data () {
    return {
      showCoordPicker: false,
      options: {
        areaCode: [],
        companyType: []
      },
      audit: 0, // 待审核
      failed: 0, // 未通过审核
      showType: 0, //1表示授权渠道管理，0：表示查看授权渠道
      showAtho: false, //查看授权渠道弹框
      userInfo: getUserInfo(),
      campanyid: null,
    }
  },
  watch: {
    // 'list.filter.auditStatusTransfer' (n) {
    //   this.list.filter.auditStatus = n == '999' ? '' : n
    // },
    'list.loading' (n) {
      if (n) {
        // this.getAuditCou()
      }
    },
    showAtho (e) {
      if (!e) {
        this.showType = 0
      }
    },
    'auth.show' (n) {
      if (!n) {
        this.auth.companyId = null
      }
    }
  },
  created () {
    this.$GET('sot-admin-api/sys/getDataListByCode', {
      dictCode: 'sys_company_type',
      domainId: import.meta.env.VITE_APP_domainId,
    }).then(res => {
      this.options.companyType = res.data
    })
  },
  methods: {
    // 获取审核数量
    getAuditCou () {
      this.$POST('sot-admin-api/sys/company/auditCou', this.list.filter).then(
        res => {
          if (res.errorCode == '00000') {
            this.audit = res.data.waitCou
            this.failed = res.data.failedCou
          } else {
            this.$swal.error(res.message)
          }
        }
      )
    },
    goAuth (row) {
      this.showAtho = true
      this.showType = 1
      this.$nextTick(_ => {
        this.$refs.auth.open(row)
      })
    },
    goAuth_ck (row) {
      this.showAtho = true
      this.$nextTick(_ => {
        this.$refs.auth.open(row)
      })
    },
    authRefresh () {
      this.getList() //刷新列表数据
      this.showAtho = false
    },
    submitX () {
      return this.submitForm().then(res => {
        if (['c', 'u'].includes(this.form.status)) {
          this.campanyid = res.data
        }
        if (this.userInfo.userType == 0) {
          // this.showType = 1
          // this.showAtho = true
          // let da = { companyId: this.campanyid }
          // this.$nextTick(_ => {
          //   this.$refs.auth.open(da)
          // })
        }
      })
    }
  },
  filters: {
    auditStatus (code) {
      const status = { 0: '待审核', 1: '审核通过', 2: '审核不通过' }
      return status[code] || ''
    }
  }
}
</script>

<style lang="scss">
.trial-state {
  border-bottom: none;
  box-shadow: none !important;

  .el-tabs__header {
    border-bottom: none;
  }

  .el-tabs__content {
    display: none;
  }
}
</style>
